{% extends "www/dashboard.html" %}
{% block title %}
	HR Dashboard
{% endblock %}

{% block content %}
	<div class="row">
		 <div class="filters">
		 </div>
	</div>
	<div class="row">
		<div class="col s12 l12 m12">
			<div class="col s12 m8 l8">
				<div class="card-deck" style="height:500px;">
					<div class="card animate fadeLeft">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">
								Employee by Departments
							</h4>
							<div class="emp-by-departments"></div>
						</div>
					</div>
					<div class="card recent-buyers-card animate fadeRight">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">
								Absents
							</h4>
							<p class="medium-small pt-2">Today</p>
							<ul class="collection mb-0 present-and-absent">
									
							</ul>
						</div>
					</div>
				</div>

			</div>
			<div class="col s12 m4 l4">
				<div class="card animate recent-buyers-card animate fadeUp" style="height: 485px;">
					<div class="card-content">
						<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">
							Birthday List
						</h4>
						<ul class="collection mb-0 birthday-list">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col s12 m12 l12">
			<div class="col s12 m6 l6">
				<div class="card" style="height:650px;">
					<div class="card-content">
						<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">Leaves Request</h4>
						<div class="leave-applications"></div>
					</div>
				</div>
			</div>
			<div class="col s12 m6 l6">
				<div class="card-deck">
					<div class="card" style="height: 300px;">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">
								Employees by year
							</h4>
							<div class="employees-by-year">
								
							</div>
						</div>
					</div>
				</div>
				<div class="card animate fadeUp" style="height: 335px;">
					<div class="card-content">
						<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">
							Work Locations
						</h4>
						<div class="work-locations">
						</div>
					</div>
				</div>	
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col s12 m4 l4">
			<div class="col s12 m12 l12">
				<div class="card-deck" style="height:500px;">
					<div class="card">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">Age Group</h4>
							<div class="age-group"></div>
						</div>
					</div>
					<div class="card">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">Work Anniversary</h4>
							<ul class="collection employee-work-anniversary"></ul>
						</div>
					</div>
					<div class="card">
						<div class="card-content">
							<h4 class="header waves-effect waves-light btn gradient-45deg-red-pink">New Joinee</h4>
							<ul class="collection new-joinee"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% block custom_script %}
	<script>
		{% include "templates/includes/dashboard/hr/hr.js" %}
	</script>
{% endblock %}
{% endblock %}

